Day5：NodeJS .ejs 模板載入json資料｜KeywordSearch 1.0 爬蟲關鍵字報表工具

2018 iT 邦幫忙鐵人賽

DAY 6

Software Development

[行銷也要自動化] 用 Python Selenium + NodeJS + Amazon EC2 打造簡易關鍵字搜尋報表應用！系列第 6 篇

2018鐵人賽 node.js ejs json 行銷技術控

Kyle

2017-12-21 23:55:07

6108 瀏覽

分享至

之前我們是直接在index.js把資料吐進.ejs模板中；今天來試試如果是json資料怎麼做。

如果我們有大量的商品資訊，每樣商品都有品名、價位、描述等，這時我們用json來儲存和更新是比較容易的。
為了等一下練習把json載入模板，我們先在專案最外層自己創一個junkfood.json，放隨意資料：（或你也可以直接複製這裡）

junkfood.json

{
    "ProductCategory": "Junk Food",
    "Products": [
        {
            "ProductId": "101",
            "ProductName": "French Fries",
            "Price": "39"
        },
        {
            "ProductId": "102",
            "ProductName": "Hamburger",
            "Price": "129"
        },
        {
            "ProductId": "103",
            "ProductName": "Ice Cream",
            "Price": "19"
        },
        {
            "ProductId": "104",
            "ProductName": "Cola",
            "Price": "12"
        },
        {
            "ProductId": "105",
            "ProductName": "Potato Cakes",
            "Price": "49"
        }
    ]
}

把junkfood.json放在最外層：

- bin/
----- www
- node_modules/
- public/
-------- images
-------- javascripts
-------- stylesheets
- routes/
-------- index.js
-------- users.js
- views/
------- error.ejs
------- index.ejs
- app.js
- package.json
- package-lock.json
+ - junkfood.json

假設我們想把這些資料載入到localhost:3000，也就是index.ejs；因為控制模板的是同名的js檔，因此首先我們要在index.js把資料集引入：

index.js

var express = require('express');
var router = express.Router();
var request = require('request');
+ var junkFood = require('../junkfood.json'); // "../"的意思是回到上一層資料夾

router.get('/', function(req, res, next) {
    res.render('index', {
        title: 'MyAppName'
    });
});

module.exports = router;

接著我們思考一下，一般在呼叫json內物件的時候會用json['key']的方式對吧，但這麼大量的資料我們當然不想一個一個call；有什麼方法可以一次call到所有同類型的資料呢？
這時候我們可以用迴圈。
在使用迴圈以前，因為我們需要在模板中呼叫能代表json資料的變數，這樣才能針對不同模板餵不同的資料，所以在res.render中要記得加入剛剛assign好的json變數：

index.js

var express = require('express');
var router = express.Router();
var request = require('request');
var junkFood = require('../junkfood.json');

router.get('/', function(req, res, next) {
    res.render('index', {
        title: 'MyAppName',
        + junkFood: junkFood
    });
});

module.exports = router;

然後我們到index.ejs來，.ejs.的迴圈有些小地方要注意：
EX: 跟變數有關的都要用<%= %>包覆起來、forEach是指將Products array中的各個項目列出（有注意到剛剛的junkFood.json裡，Products是一個大陣列吧？）：

index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <h3><%= junkFood.ProductCategory %></h3>
    <ul>
        <% junkFood.Products.forEach(function(item) { %>
            <li>#<%= item.ProductId %>: <%= item.ProductName %> | <%= item.Price %></li>
        <% }); %>
    </ul>
  </body>
</html>

接著運行node www，你會看到資料被呈現在localhost:3000上了。
連續幾天都非常的easy，明天以後我們終於要進入Python的世界。